<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas width="500" height="500px">

    </canvas>
    <script>
        let canvas = document.querySelector("canvas")
        let ctx = canvas.getContext("2d")

        // ctx.fillRect(50,100,50,50)
        let x = 0
        let y=0
        let speed=8
        // let timer = setInterval(() => {
        //     ctx.clearRect(0, 0, canvas.width, canvas.height)
        //     x = x + 1
        //     ctx.fillRect(x, 100, 50, 50)
        // }, 1000 / 60)
        ctx.fillRect(x, y, 50, 50);
        document.onkeydown = (event) => {
            switch (event.keyCode) {
                case 38:
                    y-=speed
                    break;
                case 39:
                    x+=speed
                    break;
                case 40:
                   
                    y+=speed
                    break;
                case 37:
                    x-=speed

                    break;

                default:
                    break;
            }
            ctx.clearRect(0, 0, canvas.width, canvas.height)
            ctx.fillRect(x, y, 50, 50)
        }
    </script>
</body>

</html>